<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input v-model="listQuery.fdSys" placeholder="请输入系统标识" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
      <el-input v-model="listQuery.fdModule" placeholder="请输入模块标识" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
      <el-input v-model="listQuery.fdSectionId" placeholder="请输入业务唯一标识" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
      <el-input v-model="listQuery.ossFileId" placeholder="请输入文件ID" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
      <el-select v-model="listQuery.fileType" placeholder="请选择文件类型" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" @change="handleFilter">
        <el-option
          v-for="item in dicts"
          :key="item.itemKey"
          :label="item.itemValue"
          :value="item.itemKey"
        />
      </el-select>
      <div style="float:right;">
        <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">搜索</el-button>
      </div>
    </div>
    <el-table
      :key="tableKey"
      v-loading="listLoading"
      :data="list"
      fit
      highlight-current-row
      style="width: 100%;
        margin-left: 1px;
        border-top: 1px solid #dfe6ec;
        border-left: 1px solid #dfe6ec;
        border-right: 1px solid #dfe6ec;">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="file-table-expand">
            <el-form-item label="文件ID">
              <span>&nbsp;&nbsp;&nbsp;&nbsp;{{ props.row.ossFileId }}</span>
            </el-form-item>
            <el-form-item label="系统标识">
              <span>{{ props.row.fdSys }}</span>
            </el-form-item>
            <el-form-item label="文件名称">
              <span>{{ props.row.originFileName }}.{{props.row.fileSuffix}}</span>
            </el-form-item>
            <el-form-item label="模块标识">
              <span>{{ props.row.fdModule }}</span>
            </el-form-item>
            <el-form-item label="文件类型">
              <el-tag :type="props.row.fileType | fileTypeFilter">
                {{ props.row.fileType | fileTypeValueFilter }}
              </el-tag>
            </el-form-item>
            <el-form-item label="业务标识">
              <span>{{ props.row.fdSectionId }}</span>
            </el-form-item>
            <el-form-item label="上传时间">
              <span v-if="props.row.createTime">{{ props.row.createTime | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column label="文件ID" align="left" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{ scope.row.ossFileId }}</span>
        </template>
      </el-table-column>
      <el-table-column label="文件名称" align="left" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{ scope.row.originFileName }}.{{scope.row.fileSuffix}}</span>
        </template>
      </el-table-column>
      <el-table-column label="文件类型" align="center">
        <template slot-scope="scope">
          <el-tag :type="scope.row.fileType | fileTypeFilter">
            {{ scope.row.fileType | fileTypeValueFilter }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="上传时间" align="left" show-overflow-tooltip>
        <template slot-scope="scope">
          <span v-if="scope.row.createTime">{{ scope.row.createTime | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
        </template>
      </el-table-column>
      <el-table-column v-if="checkPermission(['file:handleFile:getDownLoadLink','file:handleFile:asynDeleteFile'])" label="操作" align="center" width="120" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-tooltip v-if="checkPermission(['file:handleFile:getDownLoadLink'])" class="item action-icon" effect="dark" content="下载文件" placement="top">
            <a><svg-icon icon-class="ljm-download" class="action_icon icon-size" @click="handleDownLoad(scope.row)" /></a>
          </el-tooltip>
          <el-tooltip v-if="checkPermission(['file:handleFile:asynDeleteFile'])" class="item action-icon" effect="dark" content="放入回收站" placement="top">
            <a><svg-icon icon-class="ljm-del" class="action_icon icon-size" @click="handleAsynDeleteFile(scope.row)" /></a>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="listQuery.pageNo" :limit.sync="listQuery.pageSize" @pagination="getList" />
 </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import { delData, getList, asynDeleteFile } from '@/api/sys/file/index'
import { getItemByDictKey } from '@/api/sys/dict/item/index'
export default {
  name: 'file-record-list',
  components: { Pagination },
  data() {
    return {
      tableKey: 0,
      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        pageNo: 1,
        pageSize: 10,
        fdSys: '',
        fdModule: '',
        fdSectionId: '',
        ossFileId: '',
        fileType: ''
      },
      dicts: []
    }
  },
  filters: {
    fileTypeFilter(fileType){
      const statusTypeMap = {
        false: 'primary',
        true: 'danger'
      }
      return statusTypeMap[fileType]
    },
    fileTypeValueFilter(fileType){
      const statusTypeMap = {
        false: '公开文件',
        true: '私密文件'
      }
      return statusTypeMap[fileType]
    }
  },
  created() {
    this.getDict('file_type')
    this.getList()
  },
  methods: {
    getList() {
      this.listLoading = true
      getList(this.listQuery).then(response => {
        if(response.data){
          this.list = response.data.records
          this.total = response.data.total
          setTimeout(() => {
            this.listLoading = false
          }, 1.5 * 1000)
        }
      })
      this.listLoading = false
    },
    handleFilter() {
      this.listQuery.pageNo = 1
      this.getList()
    },
    getDict(dictKey) {
      getItemByDictKey(dictKey).then(res => {
        if (res.data) {
          this.dicts = res.data
        }
      })
    },
    handleDownLoad(param) {
      if(document.getElementById('downloadIframe')){
        document.getElementById("downloadIframe").parentNode.removeChild(document.getElementById("downloadIframe"))
      }
      const downloadUrl=process.env.VUE_APP_BASE_API+'file/handleFile/downloadFile?ossFileId='+param.ossFileId
      var elemIF = document.createElement('iframe')
      elemIF.src = downloadUrl
      elemIF.style.display = 'none'
      elemIF.id='downloadIframe'
      document.body.appendChild(elemIF)
    },
    handleAsynDeleteFile(param){
      this.$confirm('此操作将把该文件放到回收站中, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.listLoading = true
        asynDeleteFile(param.ossFileId).then(()=>{
          this.handleFilter()
          this.listLoading = false
        })
      }).catch(() => {
        this.listLoading = false
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  }
}
</script>
<style scoped>
  .action-icon{
    padding: 0 5px;
  }
  .icon-size{
    width: 17px;
    height: 17px;
  }

  .file-table-expand {
    font-size: 0;
  }
  .file-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .file-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>
